<template>
  <div id="app">
    <div class="app-wrapper" :class="{ 'sidebar-collapse': isCollapse }">
      <!-- 侧边栏 -->
      <Sidebar :is-collapse="isCollapse" />
      
      <div class="main-container">
        <!-- 顶部导航栏 -->
        <Navbar :is-collapse="isCollapse" />
        
        <!-- 主内容区 -->
        <div class="app-main">
          <router-view />
        </div>
        
        <!-- 页脚 -->
        <Footer />
      </div>
    </div>
  </div>
</template>

<script>
import Sidebar from '@/components/Sidebar.vue'
import Navbar from '@/components/Navbar.vue'
import Footer from '@/components/Footer.vue'
import { EventBus, EventNames } from '@/utils/eventBus'

export default {
  name: 'App',
  components: {
    Sidebar,
    Navbar,
    Footer
  },
  data() {
    return {
      // 侧边栏折叠状态
      isCollapse: false
    }
  },
  created() {
    // 监听侧边栏折叠事件
    EventBus.$on(EventNames.TOGGLE_SIDEBAR, this.toggleSidebar)
    // 检查URL参数，如果包含closeMenu=5则关闭侧边栏
    this.checkCloseMenuParam()
  },
  watch: {
    /**
     * 监听路由变化，检查closeMenu参数
     */
    '$route'(to, from) {
      this.checkCloseMenuParam()
    }
  },
  beforeDestroy() {
    // 移除事件监听
    EventBus.$off(EventNames.TOGGLE_SIDEBAR, this.toggleSidebar)
  },
  methods: {
    /**
     * 检查URL参数中的closeMenu值
     * 如果closeMenu=5，则自动关闭侧边栏
     */
    checkCloseMenuParam() {
      // 获取当前路由的query参数
      const closeMenuParam = this.$route.query.closeMenu
      
      // 如果参数值为'5'，则关闭侧边栏
      if (closeMenuParam === '5') {
        this.isCollapse = true
      }
    },
    /**
     * 切换侧边栏折叠状态
     */
    toggleSidebar() {
      this.isCollapse = !this.isCollapse
      // 通过事件总线通知其他组件侧边栏状态变化
      EventBus.$emit(EventNames.TOGGLE_SIDEBAR, this.isCollapse)
    }
  }
}
</script>

<style lang="scss">
/* 全局样式 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  color: #303133;
  background-color: #f5f7fa;
}

#app {
  height: 100%;
}

.app-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}

.sidebar-collapse .main-container {
  margin-left: 64px;
}

.main-container {
  min-height: 100%;
  transition: margin-left 0.28s;
  margin-left: 210px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  box-sizing: border-box;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>